<!DOCTYPE html>
<html>
	<head>
		<title>InfiniQuest</title>
		<style>
			#infiniquest .head h1{
				margin: 0px;
				padding: 0px;
				font-size: 100%;
			}
			body {
				background-color: tan;
			}
			#anim {
				background-color: black;
				height: 10px;
				width: 10px;
			}
			.tile {
				xbackground-color: red;
				position: absolute;
				height: 32px;
				width: 32px;
				visibility: hidden;
			}
			.layer {
				background-color: green;
				position: absolute;
				visibility: hidden;
				border: 2px solid yellow;
			}
			#view {
				position: relative;
			}
		</style>
		<script type="text/javascript" src="js/yahoo.js"></script>
		<script type="text/javascript" src="js/event.js"></script>
		<script type="text/javascript" src="js/dom.js"></script>
		<script type="text/javascript" src="js/animation.js"></script>


<script>
	YAHOO.namespace('alw.rpgengine');
	YAHOO.namespace('alw.tileObj');
	YAHOO.alw.rpgengine = {
		ver: 0.01,
		date: 20060710,
		init: function(){

			layer = new YAHOO.alw.layerObj();
			layer.init({id:'background',rows:5,cols:10});
			layer.create();
			layer.render();
		}
	};


	YAHOO.alw.tileObj = function(){};
	YAHOO.alw.tileObj.prototype = {
		id:null,
		x:0,
		y:0,
		sourceImg: null,
		targetDom: null,
		el: null,
		height: 32,
		width: 32,
		collision: false,
		inventory: [],
		attr: [],
		init:function(iObj){
			this.id = iObj.id;
			this.x = iObj.x;
			this.y = iObj.y;
			this.sourceImg = iObj.sourceImg;
			this.collision = iObj.collision;
			this.xOffSet= iObj.xOffSet;
			this.yOffSet= iObj.yOffSet;
			this.sourceImg= iObj.sourceImg;
			//console.log(iObj)
			this.create();
		},
		render: function(){
			YAHOO.util.Dom.setStyle(this.id,'top',this.y+'px');
			YAHOO.util.Dom.setStyle(this.id,'left',this.x+'px');
			YAHOO.util.Dom.setStyle(this.id, 'backgroundImage','url("'+this.sourceImg+'")');
			YAHOO.util.Dom.setStyle(this.id, 'backgroundPosition','-'+this.xOffSet+'px -'+this.yOffSet+'px');
			YAHOO.util.Dom.setStyle(this.id, 'visibility','visible');
		},
		create: function(){
			var tempEl = document.createElement('div');
			tempEl.setAttribute('id',this.id);
			tempEl.className = 'tile'
			this.el = tempEl;
			
		},
		move: function(dir){
			switch(dir){
				case 'north': 
					if(!isCollision(this,'north')){
						this.y = this.y-32;
						};
					break;
				case 'south':
					if(!isCollision(this,'south')){
						this.y = this.y+32;
					}		
					break;
				case 'west':
					if(!isCollision(this,'west')){
						this.x = this.x-32;
					}		
					break;
				case 'east':
					if(!isCollision(this,'east')){
						this.x = this.x+32;
					}		
					break;						
			}
			YAHOO.util.Dom.setStyle(this.id,'top',this.y+'px');
			YAHOO.util.Dom.setStyle(this.id,'left',this.x+'px');	
		},
		randomMove: function(){
			var dir =['north','south','east','west'];
			var idx = Math.floor(Math.random() * 4);
			console.log('idx:'+ idx)
			console.log('dir:'+dir[idx])
			this.move(dir[idx]);
			//this.move('south');
		}
	}


//YAHOO.util.Event.addListener(window,'load',YAHOO.alw.rpgengine.init, YAHOO.alw.rpgengine, true);
</script>




		
	</head>
	<body>
		<div id='infiniquest'>
			<div class='head'>
				<h1>InfiniQuest</h1>
				<address>by Andrew Wooldridge</address>
			</div>
			<div class='body' id='view'>
				<!--  map will show up here  -->
			</div>
			<div class='footer'>
				<!-- <img src='img/dg_dungeon32.png'/> -->
			</div>
		
		
		</div>


<script>
var baseImage = 'img/dg_dungeon32.png';
var a = new YAHOO.alw.tileObj();
a.init({id:'wall',x:-420,y:-420,collision: true, xOffSet:0, yOffSet:0,sourceImg:baseImage});
var b = new YAHOO.alw.tileObj();
b.init({id:'something', x: -100, y: -100, collision: false, xOffSet: 0, yOffSet: 32*8, sourceImg: baseImage});
//a.create();
var c = new YAHOO.alw.tileObj();
c.init({id:'something', x: -100, y: -100, collision: false, xOffSet: 32*8, yOffSet: 32*1, sourceImg: baseImage});


var player = new YAHOO.alw.tileObj();
player.init({id:'player',x: 32*2, y: 32*2, collision: false,
xOffSet: 0, yOffSet: 0, sourceImg: 'img/dg_uniques32.png'});


monstArr = [];
function spawnMonsters(amt){
	for(i = 0; i< amt; i++){
		monstArr[i] = new YAHOO.alw.tileObj();
		monstArr[i].init({
			id:'monst'+i, 
			x:6*32, 
			y: 5*32, 
			collision: false,
			xOffSet: 32 * Math.floor(Math.random()*90),
			yOffSet: 32 * Math.floor(Math.random()*80),
			sourceImg: 'img/dg_uniques32.png'
			});
		document.getElementById('view').appendChild(monstArr[i].el);	
		monstArr[i].render();	
	}
}

tileMap = [
	[a,a,a,a,a,a,a,c,a,a],
	[a,b,b,a,b,b,b,b,b,a],
	[a,b,b,a,b,b,b,b,b,a],
	[a,b,b,a,b,b,b,b,b,a],
	[a,b,b,b,b,b,b,b,b,a],
	[a,b,b,a,b,b,b,b,b,a],
	[a,b,b,a,b,b,b,b,b,a],
	[a,b,b,a,a,a,a,b,b,a],
	[a,b,b,b,b,b,a,b,b,a],
	[a,a,a,a,a,a,a,a,a,a]
]



YAHOO.util.Event.addListener(window,'load',showTile);
YAHOO.util.Event.addListener(window, 'keyup', movePlayer,player,true);
function showTile(){
	//document.getElementById('view').appendChild(a.el)
	//a.render();
	renderMap();
	startPlayer();
	spawnMonsters(5);
}
function renderMap(){
	for(var rows = 0; rows < tileMap.length; rows++){
		for(var cols = 0; cols < tileMap[rows].length; cols++){
			//domTile = tileMap[rows][cols].el.cloneNode(true);
			baseTile = tileMap[rows][cols]
			//console.log(baseTile)
			tmpTile = new YAHOO.alw.tileObj();
			tmpTile.init({id:'TileR'+rows+'C'+cols, x:cols*32, y: rows*32,collision: baseTile.collision, xOffSet:baseTile.xOffSet, yOffSet: baseTile.yOffSet, sourceImg: baseTile.sourceImg });
			document.getElementById('view').appendChild(tmpTile.el);
			tmpTile.render();
		}
	}

}
function startPlayer(){
	document.getElementById('view').appendChild(player.el);
	//console.log(player.el)
	player.render();
}

function movePlayer(e){
	//console.log(arguments[1])
	switch(e.keyCode){
		case 38: 
			player.move('north');
			break;
		case 40:
			player.move('south');		
			break;
		case 37:
			player.move('west');		
			break;
		case 39:
			player.move('east');		
			break;						
	}
	updateGame();
}


function updateGame(){
	for(var i=0;i<monstArr.length;i++){
		monstArr[i].randomMove();
	}
}






function isCollision(tileEl, direction){
	xPos = tileEl.x/32;
	yPos = tileEl.y/32;
	targetCollision = false;
	console.log('iscollision:'+direction)
	switch(direction){
		case 'north' :
			targetCollision = tileMap[yPos-1][xPos].collision;
			break;
		case 'south' :
			targetCollision = tileMap[yPos+1][xPos].collision;
			break;
		case 'west' :
			targetCollision = tileMap[yPos][xPos-1].collision;
			break;
		case 'east' :
			targetCollision = tileMap[yPos][xPos+1].collision;
			break;
			
	}
	return targetCollision;
}

</script>	
	
	</body>
</html>
